<template>
  <div class="page">
    <el-table
      :data="tableData"
      stripe
      :header-cell-style="{ 'background-color': 'rgba(254,90,19,0.05)' }"
      style="width: 100%"
    >
      <el-table-column prop="name" label="用户类型" width="180"> </el-table-column>
      <el-table-column prop="address" label="用户名称" width="180"> </el-table-column>
      <el-table-column prop="address" label="举报类型" width="180"> </el-table-column>
      <el-table-column prop="date" label="补充说明"> </el-table-column>
      <el-table-column prop="date" label="状态"> </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
export default {
  name: "reportList",

  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      total: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  margin: auto;
  background: #f7f7f7;
}

::v-deep .el-table thead {
  font-weight: normal;
  font-size: 14px;
  color: #000000;
}

::v-deep .pagination-container {
  width: 100%;
  padding: 50px 20px;
  box-sizing: border-box;
  background: #fff;
}
</style>
